<template>
  <van-config-provider :theme-vars="buttonThemeVars">
    <van-button
      :plain="plain"
      :type="type"
      :size="size"
      :block="block"
      :disabled="disabled"
      @click="onclick"
      >{{ text }}</van-button
    >
  </van-config-provider>
</template>

<script>
import { ref, watch } from "vue";
export default {
  name: "NavBar",
  components: {},
  props: {
    type: { type: String, default: "default" },
    text: { type: String, default: "按钮" },
    color: { type: String, default: "" },
    size: { type: String, default: "" },
    plain: { type: Boolean, default: false },
    block: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
  },
  setup(props, { emit }) {
    const buttonThemeVars = {
      buttonBorderRadius: "11px",
      buttonRoundBorderRadius: "100px",
      buttonPrimaryBackgroundColor: "#0100a8",
      buttonNormalPadding: "24px",
      buttonSmallPadding: "10px 20px",
      buttonMiniPadding: "0 30px",
    };

    const onclick = (e) => {
      emit("click", e);
      e.stopPropagation();
    };

    return {
      onclick,
      buttonThemeVars,
    };
  },
};
</script>
<style lang="less" scoped>
</style>